<template>
  <view class="picker_container">
    <picker :range="proArray" class="fl sheng" @change="getsheng" range-key="value">
      <view class="picker ju3 proc input">{{addr.sheng.value}}</view>
    </picker>
    <picker
      :range="cityArray"
      class="fl sheng"
      @change="getshi"
      :disabled="shidisables"
      range-key="value"
    >
      <view class="picker ju3 proc input">{{addr.shi.value}}</view>
    </picker>
    <picker
      :range="areaArray"
      @change="getArea"
      class="fl sheng"
      :disabled="qudisables"
      range-key="value"
    >
      <view class="picker ju3 proc input">{{addr.qu.value}}</view>
    </picker>
    <picker
      :range="townArray"
      @change="getTown"
      class="fl sheng"
      :disabled="towndisables"
      range-key="value"
    >
      <view class="picker ju3 proc input">{{addr.town.value}}</view>
    </picker>
  </view>
</template>
<script>
import { getAddressList } from "@/util/util";
export default {
  data() {
    return {
      proArray: [],
      cityArray: [],
      areaArray: [],
      townArray: [],
      shidisables: true, //禁用市选择框
      qudisables: true, //禁用区选择框
      towndisables: true,
      addr: {
        sheng: { key: "", value: "省", LevelNum: "", ParentID: "" },
        shi: { key: "", value: "市", LevelNum: "", ParentID: "" },
        qu: { key: "", value: "区", LevelNum: "", ParentID: "" },
        town: { key: "", value: "乡镇/街道", LevelNum: "", ParentID: "" },
      },
    };
  },
  mounted() {
    this.createCitys();
  },
  methods: {
    //省
    async createCitys() {
      let res = await getAddressList(1, 0);
      this.proArray = res;
    },
    //选中省后创建市数组
    async getsheng(e) {
      let that = this;
      if (that.proArray[e.detail.value] == that.addr.sheng) return;
      let res = await getAddressList(
        2,
        Number(that.proArray[e.detail.value].key)
      );
      this.cityArray = res;
      this.shidisables = false;
      this.addr.sheng = this.proArray[e.detail.value];
      this.addr.shi = { key: "", value: "市", LevelNum: "", ParentID: "" };
      this.addr.qu = { key: "", value: "区", LevelNum: "", ParentID: "" };
      this.addr.town = {
        key: "",
        value: "乡镇/街道",
        LevelNum: "",
        ParentID: "",
      };
      this.$emit("adCho", this.proArray[e.detail.value]);
    },
    //选中市后创建区数据
    async getshi(e) {
      let that = this;
      if (that.cityArray[e.detail.value] == that.addr.shi) return;
      this.addr.shi = that.cityArray[e.detail.value];
      this.addr.qu = { key: "", value: "区", LevelNum: "", ParentID: "" };
      this.addr.town = {
        key: "",
        value: "乡镇/街道",
        LevelNum: "",
        ParentID: "",
      };
      this.$emit("adCho", this.cityArray[e.detail.value]);
      let res = await getAddressList(3, that.cityArray[e.detail.value].key);
      this.areaArray = res;
      this.qudisables = false;
    },
    //获取区数据
    async getArea(e) {
      var that = this;
      if (that.areaArray[e.detail.value] == that.addr.qu) return;
      this.addr.qu = this.areaArray[e.detail.value];
      this.addr.town = {
        key: "",
        value: "乡镇/街道",
        LevelNum: "",
        ParentID: "",
      };
      this.$emit("adCho", this.areaArray[e.detail.value]);
      let res = await getAddressList(4, that.areaArray[e.detail.value].key);
      if (res.length == 0) {
        uni.showToast({
          title: "暂无下级",
          icon: "none",
        });
      } else {
        this.townArray = res;
        this.towndisables = false;
      }
    },
    getTown(e) {
      var that = this;
      this.addr.town = this.townArray[e.detail.value];
      this.$emit("adCho", this.townArray[e.detail.value]);
    },
  },
};
</script>
<style lang="scss" scoped>
.picker_container {
  width: 580rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.sheng {
  width: 280rpx;
  height: 80rpx;
  background: #fff;
  text-align: center;
  font-size: 30rpx;
  line-height: 80rpx;
  margin: 20rpx auto;
}
</style>